<template>
    <div>
        <mavon-editor v-model="Blog.context" ref="md" @imgAdd="handleEditorImgAdd" @imgDel="handleEditorImgDel"
            @save="saveMd" />
        <el-dialog title="汽车信息表单" :visible.sync="dialogVisible" width="50%">
            <el-form label-width="80px" :model="Blog" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="文章标题" prop="title">
                    <el-input v-model="Blog.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文章简介" prop="intro">
                    <el-input type="textarea" v-model="Blog.intro" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="车型" prop="carId">
                    <el-select v-model="Blog.carId" filterable placeholder="其他">
                        <el-option v-for="item in cars" :key="item.carId" :label="item.carName"
                            :value="item.carId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div style="text-align: right;">
                    <el-button @click="dialogVisible=false">取 消</el-button>
                    <el-button type="primary" @click="saveBlog('ruleForm',1)">发 布</el-button>
                    <el-button type="success" @click="saveBlog('ruleForm',0)">暂存为草稿</el-button>
                </div>

            </el-form>
        </el-dialog>

    </div>


</template>

<script>
import router from '../../router';

export default {
    name: "EditArtice",
    mounted() {

    },
    data: function () {
        return {
            imgFile: [],
            Blog: {
                id: '',
                clientId: '',
                carId: 0,
                title: '',
                context: '',
                intro: '',
                issueTime: '',
                hot: ''
            },
            cars:[],
            dialogVisible: false
        }
    },
    methods: {
        handleEditorImgAdd(pos, $file) {
            debugger;
            let formdata = new FormData()
            formdata.append('file', $file)
            this.imgFile[pos] = $file
            this.$axios.post('/file/upload', formdata).then(res => {
                //debugger;

                let url = res.data.data
                let name = $file.name
                if (name.includes('-')) {
                    name = name.replace(/-/g, '')
                }
                let content = this.Blog.context
                // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)  这里是必须要有的
                if (content.includes(name)) {
                    let oStr = `(${pos})`
                    let nStr = `(${url})`
                    let index = content.indexOf(oStr)
                    let str = content.replace(oStr, '')
                    let insertStr = (soure, start, newStr) => {
                        return soure.slice(0, start) + newStr + soure.slice(start)
                    }
                    this.Blog.context = insertStr(str, index, nStr)
                }
            })
        },
        handleEditorImgDel(pos) {
            delete this.imgFile[pos]
        },
        saveMd(value, render) {
            this.LodeCarList();
            this.dialogVisible = true;

        },
        saveBlog(formName,status){
            this.Blog.blogStatus = status;
            //console.log(this.Blog.context)
            this.$axios.post('/article/save', this.Blog).then(res => {
                this.$message.success("保存成功");
            })
            router.push('/')
            
        },
        LodeCarList(){
            this.$axios.get('/car/list').then(res => {
                this.cars = res.data.data;
                this.cars.push({"carName":"其他","carId":0});
                //debugger
            })
        },
        LoadArticle(edit_id) {
            this.$axios.get("/article/get", { params: { articleId: edit_id } }).then(res => {
                if (res) {
                    this.Blog = res.data.data;
                }
                else {
                    this.$message.error("加载失败");
                }
            });

        }

    },
    created(){
        //debugger
        const edit_id = this.$route.params.edit_id
        if(edit_id){
            this.LoadArticle(edit_id)
        }
    }
}
</script>


<style scoped>
</style>

